<template>
    <!-- 开发排名前五城市 -->
    <div class="city-ranking">
        <echart-title title="开发排名前五城市"></echart-title>
        <div class="city-content">
            <div style="padding: 0px 24px">
                <div class="ranking-title bj-flex-start">
                    <div class="bj-flexitem-1">全球排名</div>
                    <div>数量(家)</div>
                </div>
            </div>
            
            <div class="bj-flex-center">
                <div class="ranking-echart" ref="rankingId"></div>
            </div>
        </div>
        
    </div>
</template>

<script>
import echartTitle from "@/components/echartTitle.vue";
export default {
    components:{
        echartTitle
    },
    props:{
        
    },
    data () {
        return {
            
        }
    },
     mounted () {
        this.initChart();
    },
    methods: {
        initChart(){
            // 初始化 echarts 实例
            const myChart = this.$echarts.init(this.$refs.rankingId);
             // 指定图表的配置项和数据
            const option = {
                grid: {
                    top: '5%',
                    show: 'true',
                    borderWidth: '0',
                    height: '88%',
                    width: '82%',
                },
                xAxis: {
                    show: false, //是否显示x轴
                    type: 'value',
                },
                yAxis: [
                    {
                        type: 'category',
                        inverse: true, //让y轴数据逆向
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#AACBDE',
                                fontSize: 12,
                            },
                        },
                        splitLine: { show: false }, //横向的线
                        axisTick: { show: false }, //y轴的端点
                        axisLine: { show: false }, //y轴的线
                        data: ['6-01','6-02','6-03','6-04','6-05'],
                    },
                ],
                series: [
                    {
                        name: '排名',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                barBorderRadius: 30,
                                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: 'rgba(1, 42, 244, 1)',
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(6, 237, 253, 1)',
                                    },
                                ]),
                            },
                        },
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: '#1AACFF',
                                fontWeight: 'bold'
                            },
                            formatter: (params) => {
                                if (params.value === 0) {
                                    return '';
                                } else {
                                    return params.value;
                                }
                            },
                        },
                        barWidth: 12,
                        data: [888,666,222,999,333],
                    },
                ],
            }
        
            // 使用配置项显示图表
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" class>
.city-ranking{
    width: 456px;
    height: 340px;
    .city-content{
        width: 100%;
        height: 298px;
        background: linear-gradient( 180deg, rgba(7,29,65,0.1) 0%, rgba(10,47,107,0.4) 100%);
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(34, 83, 135, 1), rgba(42, 112, 186, 1), rgba(34, 83, 135, 1), rgba(57, 128, 202, 1), rgba(34, 83, 135, 1)) 1 1;
    }
    .ranking-title{
        padding: 16px 0 12px;
        border-bottom: 1px solid #053269;
        font-size: 14px;
        color: #AACBDE;
    }
    .ranking-echart{
        width: 100%;
        height: 260px;
    }
}
</style>